<template>
  <div class="hello">
    <div id="container">
      <video id="video" width="600" height="400" autoplay>
        您的浏览器不支持video标签
      </video>
      Audio: <span id="acodecs"></span><br />
      Video: <span id="vcodecs"></span> SessionID: <span id="sessionid"></span>
    </div>
  </div>
</template>
<script>
export default {
  name: "WebRtc",
  data() {
    return {
      video: null,
      videoObj: { video: { width: 600, height: 400 } },
    };
  },
  methods: {},
  mounted() {
    var sdk = null;
    if (sdk) {
      sdk.close();
    }
    sdk = new SrsRtcPublisherAsync();
    $("#video").prop("srcObject", sdk.stream);
    sdk.pc.onicegatheringstatechange = function (event) {
      if (sdk.pc.iceGatheringState === "complete") {
        $("#acodecs").html(SrsRtcFormatSenders(sdk.pc.getSenders(), "audio"));
        $("#vcodecs").html(SrsRtcFormatSenders(sdk.pc.getSenders(), "video"));
      }
    };

    var url = "webrtc://172.16.100.92/live/livestream";
    sdk
      .publish(url)
      .then(function (session) {
        $("#sessionid").html(session.sessionid);
      })
      .catch(function (reason) {
        sdk.close();
        console.error(reason);
      });
  },
};
</script>